<template>
  <view class="flex-col page">
    <view class="flex-col group">
        <!-- 顶部 -->
      <view class="flex-row self-stretch section">
        <view class="flex-row items-start shrink-0 self-center">
          <view class="flex-col top">
            <!-- <image
              class="self-end back"
              src="../../static/wx/dc8fc437aff2b0e10e85f231d99f802e.png"
            /> -->
            <image
              class="self-start image_4 mt-13"
              src="../../static/wx/1eed38e2f4a20a563ab4974786889b8c.png"
            />
          </view>
          <image
            class="ml-20 image"
            src="../../static/wx/6cb60f894ce04dccf52e215dd85664ed.png"
          />
        </view>
        <view class="flex-row flex-1 self-start top-title ml-23">
          <!-- <text class="self-start text">会员中心</text> -->
          <image
            class="flex-1 image_3 ml-21"
            src="../../static/wx/142577551bf8d5f9c53f5f30140e473b.png"
          />
        </view>
      </view>
      <view class="flex-col self-center relative section_2">
        <!-- 用户信息 -->
        <view class="flex-row">
          <view class="flex-row items-center flex-1">
            <image
              class="shrink-0 image_5"
              src="../../static/wx/de2f75976f019ffe242ab3b9f57a845c.png"
            />
            <view class="ml-18 flex-col flex-1">
              <text class="self-start font text_2">您好，四叶草</text>
              <view
                class="flex-row justify-between items-center self-stretch mt-9"
              >
                <text class="font_2 text_4">ID: 2972334</text>
                <image
                  class="image_6"
                  src="../../static/wx/18abd977fbebc9cf524823e3bf678dbc.png"
                />
              </view>
            </view>
          </view>
          <text class="ml-20 self-start font_2 text_3">普通会员</text>
        </view>
        <!-- 积分 -->
        <view class="flex-col points">
          <view class="flex-col justify-start items-start section_3"
            ><view class="section_4" style="width: 80%;"></view
          ></view>
          <view class="flex-row justify-between items-center points-box">
            <view class="points-num">
              <text class="font text_5">积分：</text>
              <text class="text_6">1343</text>
            </view>
            <text class="text_7">Platinum</text>
          </view>
        </view>
        <!-- 功能列表 -->
        <view class="flex-row justify-between items-center list-box view">
          <view class="flex-row items-center">
            <image
              class="shrink-0 image_7"
              src="../../static/wx/a175616e6e6a3fdd8957ea97b3859a74.png"
            />
            <text class="font ml-19">我的个人资料</text>
          </view>
          <image
            class="image_8 image_9"
            src="../../static/wx/564a3b944af32f4baa87d761b5df9b72.png"
          />
        </view>
        <view class="flex-row justify-between items-center list-box view_2">
          <view class="flex-row items-center">
            <image
              class="shrink-0 image_10"
              src="../../static/wx/51b5d0ac91f2cabe8ea98305ee3fd0fc.png"
            />
            <text class="ml-18 font text_8">通知</text>
          </view>
          <image
            class="image_8 image_11"
            src="../../static/wx/a2f2d0f1d6508454b436767bee547cac.png"
          />
        </view>
        <view class="flex-row justify-between items-center list-box view_3">
          <view class="flex-row items-center">
            <image
              class="shrink-0 image_12"
              src="../../static/wx/f18a81ec8f02eb230c8ae247cc812c3b.png"
            />
            <text class="font text_9 ml-17">积分总的成长值</text>
          </view>
          <image
            class="image_8 image_13"
            src="../../static/wx/564a3b944af32f4baa87d761b5df9b72.png"
          />
        </view>
        <view class="flex-row justify-between items-center list-box view_4">
          <view class="flex-row items-center">
            <image
              class="shrink-0 image_14"
              src="../../static/wx/b0cd74b6d5131e3d0daf8a016dc0b6a2.png"
            />
            <text class="font ml-19">积分券兑换积分</text>
          </view>
          <image
            class="image_8 image_15"
            src="../../static/wx/564a3b944af32f4baa87d761b5df9b72.png"
          />
        </view>
        <view class="flex-row justify-between items-center list-box view_5">
          <view class="flex-row items-center">
            <image
              class="shrink-0 image_16"
              src="../../static/wx/d5122b219d82425e4f41f737aed3f999.png"
            />
            <text class="font text_10 ml-15">帮助中心</text>
          </view>
          <image
            class="image_8 image_17"
            src="../../static/wx/564a3b944af32f4baa87d761b5df9b72.png"
          />
        </view>
        <view class="flex-row justify-between items-center list-box view_6">
          <view class="flex-row items-center">
            <image
              class="shrink-0 image_18"
              src="../../static/wx/e3e0bc3387809071f846a41a4b48f6a5.png"
            />
            <text class="font ml-19">系统设置</text>
          </view>
          <image
            class="image_8 image_19"
            src="../../static/wx/564a3b944af32f4baa87d761b5df9b72.png"
          />
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <view class="footer-gap"></view>
    <view class="flex-row justify-between items-center relative footer">
        <view class="flex-row items-center">
          <image
            class="footer-home"
            src="../../static/nav/home.png"
          />
          <image
            class="ml-46 footer-bill"
            src="../../static/nav/bill.png"
          />
        </view>
        <view class="flex-row">
          <image
            class="footer-favorite"
            src="../../static/nav/favorite.png"
          />
          <image
            class="ml-44 footer-profile"
            src="../../static/nav/profile_active.png"
          />
        </view>
        <image
              class="mt-30 self-center footer-add"
              src="../../static/nav/add.png"
            />
      </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },

  methods: {},
};
</script>

<style scoped lang="css">
.mt-13 {
  margin-top: 26rpx;
}
.ml-23 {
  margin-left: 46rpx;
}
.ml-21 {
  margin-left: 42rpx;
}
.mt-9 {
  margin-top: 18rpx;
}
.ml-19 {
  margin-left: 38rpx;
}
.ml-17 {
  margin-left: 34rpx;
}
.ml-15 {
  margin-left: 30rpx;
}
.mt-105 {
  margin-top: 210rpx;
}
.page {
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.section {
  /* padding: 52rpx 24rpx 120rpx 36rpx; */
  padding: 0 24rpx 120rpx 36rpx;
  background-color: #3a7beb;
  border-radius: 0rpx 0rpx 120rpx 120rpx;
}
.top {
  margin-top: 68rpx;
  width: 67.74rpx;
}
.back {
  width: 48rpx;
  height: 44rpx;
}
.image_4 {
  width: 52rpx;
  height: 124rpx;
}
.image {
  width: 106rpx;
  height: 112rpx;
}
.top-title {
  margin-top: 68rpx;
}
.text {
  color: #ffffff;
  font-size: 40rpx;
  font-family: Laila;
  font-weight: 700;
  line-height: 37.96rpx;
}
.image_3 {
  margin-top: 8rpx;
  height: 164rpx;
}
.section_2 {
  margin-top: -206rpx;
  padding: 34rpx 28rpx 66rpx;
  background-color: #ffffff;
  border-radius: 40rpx;
  box-shadow: 0rpx 6rpx 40rpx #fd878726;
  width: 638rpx;
}
.image_5 {
  border-radius: 30rpx;
  width: 134rpx;
  height: 134rpx;
}
.font {
  font-size: 32rpx;
  font-family: Mukta;
  line-height: 29.66rpx;
  color: #2d3142;
}
.text_2 {
  font-weight: 600;
  line-height: 31.62rpx;
}
.font_2 {
  font-size: 28rpx;
  font-family: Mukta;
  color: #2d3142;
}
.text_4 {
  line-height: 18.4rpx;
}
.image_6 {
  width: 32rpx;
  height: 32rpx;
}
.text_3 {
  margin-right: 4rpx;
  margin-top: 76rpx;
  line-height: 25.92rpx;
}
.points {
  margin-top: 38rpx;
  border-bottom: solid 2rpx #fdf2ec;
}
.section_3 {
  margin-right: 10rpx;
  background-color: #e6e9f1;
  border-radius: 12rpx;
}
.section_4 {
  background-color: #f08000;
  border-radius: 12rpx;
  width: 0;
  height: 12rpx;
}
.points-box {
  padding: 16rpx 0 40rpx;
}
.points-num {
  line-height: 29.32rpx;
  height: 29.32rpx;
}
.text_5 {
  color: #f08000;
  line-height: 29.32rpx;
}
.text_6 {
  color: #f08000;
  font-size: 32rpx;
  font-family: Mukta;
  line-height: 20.8rpx;
}
.text_7 {
  margin-right: 8rpx;
  color: #2d3142;
  font-size: 24rpx;
  font-family: Mukta;
  line-height: 17.26rpx;
}
.list-box {
  padding: 0 22rpx;
}
.view {
  margin-top: 68rpx;
}
.image_7 {
  width: 36rpx;
  height: 42rpx;
}
.image_8 {
  width: 16rpx;
  height: 28rpx;
}
.image_9 {
  margin-right: 14rpx;
}
.view_2 {
  margin-top: 66rpx;
}
.image_10 {
  width: 38rpx;
  height: 42rpx;
}
.text_8 {
  line-height: 29.38rpx;
}
.image_11 {
  margin-right: 12rpx;
}
.view_3 {
  margin-top: 66rpx;
}
.image_12 {
  width: 41.2rpx;
  height: 41.2rpx;
}
.text_9 {
  line-height: 29.8rpx;
}
.image_13 {
  margin-right: 12rpx;
}
.view_4 {
  margin-top: 68rpx;
}
.image_14 {
  width: 34.6rpx;
  height: 42rpx;
}
.image_15 {
  margin-right: 14rpx;
}
.view_5 {
  margin-top: 68rpx;
}
.image_16 {
  width: 44rpx;
  height: 36rpx;
}
.text_10 {
  line-height: 29.5rpx;
}
.image_17 {
  margin-right: 14rpx;
}
.view_6 {
  margin-top: 70rpx;
}
.image_18 {
  width: 34rpx;
  height: 42rpx;
}
.image_19 {
  margin-right: 16rpx;
}

.image_20 {
  box-shadow: 0rpx 16rpx 60rpx #6c7e9329;
  border-radius: 50%;
  width: 96rpx;
  height: 96rpx;
}
.section_5 {
  margin-top: -68rpx;
  padding: 44rpx 74rpx;
  filter: drop-shadow(0rpx 16rpx 30rpx #6c7e9329);
  background-image: url("../../static/wx/50e3260167b8548a8ce3e18e87ff34bb.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.image_21 {
  width: 40rpx;
  height: 44rpx;
}
.image_22 {
  width: 30rpx;
  height: 38rpx;
}
.image_23 {
  width: 44rpx;
  height: 38rpx;
}
.image_24 {
  width: 34rpx;
  height: 38rpx;
}
</style>
